<template>
  <div class="recommend">
    <div :class="[`head-${theme}`, 'head']">
      <textarea
        v-model="content"
        :class="['text-area', `text-area-${theme}`]"
      ></textarea>
      <p>
        <el-button size="mini" type="primary" @click="sendCommend"
          >评论</el-button
        >
      </p>
    </div>
    <div class="list_wrap">
      <h4>精彩评论</h4>
      <div class="list">
        <div
          class="list_one"
          v-for="item in remcommendList"
          :key="item.commentId"
        >
          <img :src="item.user.avatarUrl" alt="" />
          <div class="list_right">
            <div>
              <a href="#">{{ item.user.nickname }}</a>
              <span>{{ item.content }}</span>
            </div>
            <p>
              {{ _mydate(item.time) }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { theme } from '../../mixin/global/theme'
import { formatDate } from '../../utils/tool'
import { _pushCommend } from '../../network/detail'
export default {
  mixins: [theme],
  data () {
    return {
      content: ''
    }
  },
  props: {
    remcommendList: {
      //评论列表数据
      type: Array,
      default () {
        return []
      }
    },
    albumid: {
      //歌单id或mvid
      type: [String, Number],
      default: ''
    }
  },
  methods: {
    async sendCommend () {
      if (!localStorage.cookie) {
        this.$message.info('请先登录')
        return
      } else {
        var res = await _pushCommend(
          localStorage.cookie,
          this.albumid,
          this.content
        )
        console.log(res)
        if (res.data.code == 200) {
          this.$message('评论成功')
          this.$emit('reset')
          this.content = ''
        }
      }
    },
    _mydate (time) {
      return formatDate(new Date(time), 'yyyy年MM月dd日 hh:mm:ss')
    }
  }
}
</script>
<style lang="less">
.recommend {
  width: 100%;
  .head {
    padding: 15px 10px 10px 10px;
    &-light {
      background: #f0f0f2;
    }
    &-dark {
      background: #1c1e22;
    }
    &-green {
      background: #f0f0f2;
    }
    p {
      text-align: right;
    }
  }
  .text-area {
    width: 100%;
    height: 60px;
    outline: none;
    border: 1px solid var(--border);
    &-dark {
      background: #2b2c31;
      color: #fff;
      border: none;
    }
  }
}
.list_wrap {
  width: 90%;
  margin: 10px auto;
  .list {
    .list_one {
      width: 100%;
      display: flex;
      height: 120px;
      &:nth-child(odd) {
        background: #f7f7f7;
      }
      &:nth-child(even) {
        background: white;
      }
      img {
        width: 80px;
        height: 80px;
        margin-top: 10px;
        margin-left: 10px;
        border-radius: 50%;
      }
      .list_right {
        padding-top: 10px;
        flex: 1;
        margin-left: 40px;
        height: 100px;
        line-height: 30px;
        p {
          margin-top: 10px;
        }
        a {
          margin-right: 20px;
        }
      }
    }
  }
}
</style>
